<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <div class="header-content">
        <i class="fa fa-arrow-left" @click="goBack"></i>
        <div class="header-title">商家信息</div>
        <div class="placeholder"></div>
      </div>
    </header>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 商家logo部分 -->
      <div class="business-logo">
        <img :src="business.businessImg" @error="handleImageError" alt="商家logo" />
      </div>

      <!-- 商家信息部分 -->
      <div class="business-info">
        <div class="business-info-header">
          <div class="business-name">{{ business.businessName }}</div>
          <div class="rating-info">
            <div class="stars">
              <i v-for="index in 5" 
                 :key="index" 
                 class="fa fa-star"
                 :class="{ 'active': index <= business.averageRating }">
              </i>
              <span class="rating">{{ business.averageRating?.toFixed(1) || '暂无' }}</span>
            </div>
            <div class="monthly-sales">月售 {{ business.ratingCount || 0 }} 单</div>
          </div>
        </div>
        <div class="business-info-content">
          <div class="info-item">
            <i class="fa fa-clock-o"></i>
            <span>营业时间：09:00-22:00</span>
          </div>
          <div class="info-item">
            <i class="fa fa-motorcycle"></i>
            <span>{{ business.deliveryPrice }}元配送费</span>
          </div>
          <div class="info-item">
            <i class="fa fa-credit-card"></i>
            <span>{{ business.startPrice }}元起送</span>
          </div>
          <div class="info-item">
            <i class="fa fa-map-marker"></i>
            <span>{{ business.businessAddress }}</span>
          </div>
        </div>
        <div class="business-notice" v-if="business.businessExplain">
          <i class="fa fa-volume-up"></i>
          <span>{{ business.businessExplain }}</span>
        </div>
      </div>

      <!-- 新增导航栏部分 -->
      <div class="nav-bar">
        <div 
          class="nav-item" 
          v-for="(item, index) in navItems" 
          :key="index"
          :class="{ active: currentTab === item.key }"
          @click="switchTab(item.key)"
        >
          {{ item.text }}
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="content-area">
        <!-- 点餐内容 -->
        <div v-show="currentTab === 'menu'" class="tab-content">
          <ul class="food">
            <li v-for="(item, index) in foodArr" :key="item.foodId">
              <div class="food-left">
                <img :src="item.foodImg" />
                <div class="food-left-info">
                  <h3>{{ item.foodName }}</h3>
                  <p>{{ item.foodExplain }}</p>
                  <p class="food-price">{{ item.foodPrice }}</p>
                </div>
              </div>
              <div class="food-right">
                <div>
                  <i
                    class="fa fa-minus-circle"
                    @click="minus(index)"
                    v-show="item.quantity != 0"
                  ></i>
                </div>
                <p>
                  <span v-show="item.quantity != 0">{{ item.quantity }}</span>
                </p>
                <div>
                  <i class="fa fa-plus-circle" @click="add(index)"></i>
                </div>
              </div>
            </li>
          </ul>
        </div>
        
        <!-- 评价内容 -->
        <div v-show="currentTab === 'ratings'" class="tab-content">
          <div class="ratings-wrapper">
            <!-- 评分概览 -->
            <div class="rating-overview">
              <div class="rating-score">
                <h2>{{ business.averageRating?.toFixed(1) || '暂无' }}</h2>
                <p>综合评分</p>
              </div>
              <div class="rating-count">
                <p>共{{ business.ratingCount || 0 }}条评价</p>
              </div>
            </div>

            <!-- 评价列表 -->
            <div class="review-list">
              <div v-if="reviews.length === 0" class="no-review">
                暂无评价
              </div>
              <div v-else v-for="review in reviews" :key="review.id" class="review-item">
                <div class="review-header">
                  <img 
                    :src="review.userAvatar ? handleAvatarUrl(review.userAvatar) : defaultAvatar" 
                    class="user-avatar"
                    @error="$event.target.src = defaultAvatar"
                  >
                  <div class="review-info">
                    <div class="user-name">{{ review.username || '匿名用户' }}</div>
                    <div class="review-time">{{ formatDate(review.createdTime) }}</div>
                  </div>
                  <div class="review-rating">
                    <i v-for="index in 5" 
                       :key="index" 
                       class="fa fa-star"
                       :class="{ 'active': index <= review.rating }">
                    </i>
                  </div>
                </div>
                <div class="review-content">
                  {{ review.comment }}
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 商家详情内容 -->
        <div v-show="currentTab === 'info'" class="tab-content">
          <div class="business-detail">
            <div class="detail-item">
              <h3>商家信息</h3>
              <p>地址: {{ business.businessAddress }}</p>
              <p>营业时间: 09:00-22:00</p>
              <p>配送说明: {{ business.deliveryPrice }}元配送费</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 购物车部分 -->
      <div class="cart" v-show="currentTab === 'menu'">
        <div class="cart-left" @click="showCartPopup">
          <div
            class="cart-left-icon"
            :style="
              totalQuantity == 0
                ? 'background-color:#505051;'
                : 'background-color:#3190E8;'
            "
          >
            <i class="fa fa-shopping-cart"></i>
            <div class="cart-left-icon-quantity" v-show="totalQuantity != 0">
              {{ totalQuantity }}
            </div>
          </div>
          <div class="cart-left-info">
            <p>&#165;{{ totalPrice }}</p>
            <p>另需配送费{{ business.deliveryPrice }}元</p>
          </div>
        </div>
        <div class="cart-right">
          <!-- 不够起送费 -->
          <div
            class="cart-right-item"
            v-show="totalSettle < business.startPrice"
            style="background-color: #535356; cursor: default"
          >
            &#165;{{ business.startPrice }}起送
          </div>
          <!-- 达到起送费 -->
          <div
            class="cart-right-item"
            @click="toOrder"
            v-show="totalSettle >= business.startPrice"
            style="background-color: #ff7043; cursor: pointer"
          >
            去结算
          </div>
        </div>
      </div>

      <!-- 购物车弹出层 -->
      <div class="cart-popup" v-show="isCartPopupVisible && currentTab === 'menu'">
        <!-- 遮罩层 -->
        <div class="mask" @click="hideCartPopup"></div>
        
        <!-- 弹出内容 -->
        <div class="popup-content">
          <div class="popup-header">
            <span>购物车</span>
            <div class="clear" @click="clearCart">
              <i class="fa fa-trash-o"></i>
              <span>清空购物车</span>
            </div>
          </div>
          
          <div class="food-list">
            <div v-for="(item, index) in cartFoods" 
                 :key="item.foodId" 
                 class="food-item">
              <div class="food-info">
                <img :src="item.foodImg" :alt="item.foodName">
                <div class="food-detail">
                  <h4>{{ item.foodName }}</h4>
                  <p class="price">¥{{ item.foodPrice }}</p>
                </div>
              </div>
              <div class="quantity-control">
                <i class="fa fa-minus-circle" @click="minus(index)"></i>
                <span>{{ item.quantity }}</span>
                <i class="fa fa-plus-circle" @click="add(index)"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useUserInfoStore } from '@/stores/user';
import { listFoodService } from "@/api/food";
import { getBusinessByIdService } from "@/api/business";
import { 
  listCartByUserIdAndBusinessIdService, 
  addCartService, 
  updateCartService, 
  deleteCartService 
} from "@/api/cart";
import { ElMessage } from 'element-plus';
import { handleAvatarUrl } from '@/utils/imageUtils';
import { createOrder } from '@/api/orders';
import { getBusinessReviews } from '../api/review';
import defaultAvatar from '../assets/img/default.png';

// 路由相关
const router = useRouter();
const route = useRoute();

// 状态管理
const userStore = useUserInfoStore();
const business = ref({});
const foodArr = ref([]);
const businessId = route.query.businessId;

// 计算属性
const totalPrice = computed(() => {
  const total = foodArr.value.reduce((total, item) => {
    return total + item.foodPrice * item.quantity;
  }, 0);
  return total.toFixed(2);
});

const totalQuantity = computed(() => {
  return foodArr.value.reduce((quantity, item) => {
    return quantity + item.quantity;
  }, 0);
});

const totalSettle = computed(() => {
  const total = Number(totalPrice.value) + business.value.deliveryPrice;
  return total.toFixed(2);
});

// 购物车弹出层状态
const isCartPopupVisible = ref(false);

// 获取购物车中的商品
const cartFoods = computed(() => {
  return foodArr.value.filter(food => food.quantity > 0);
});

// 显示购物车弹出层
const showCartPopup = () => {
  if (totalQuantity.value > 0) {
    isCartPopupVisible.value = true;
  }
};

// 隐藏购物车弹出层
const hideCartPopup = () => {
  isCartPopupVisible.value = false;
};

// 清空购物车
const clearCart = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要清空购物车吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    );

    const deletePromises = cartFoods.value.map(food => 
      deleteCartService(food.cartId)
    );

    await Promise.all(deletePromises);
    
    // 清空本地数据
    foodArr.value.forEach(food => {
      food.quantity = 0;
    });
    
    hideCartPopup();
    ElMessage.success('购物车已清空');
  } catch (error) {
    if (error !== 'cancel') {
      console.error('清空购物车失败:', error);
      ElMessage.error('清空购物车失败');
    }
  }
};

// 初始化数据
const init = async () => {
  try {
    // 获取商家信息
    const businessRes = await getBusinessByIdService({ businessId });
    if (businessRes.code === 0) {
      business.value = businessRes.data;
      // 处理商家图片
      business.value.businessImg = handleAvatarUrl(business.value.businessImg);
    } else {
      ElMessage.error('获取商家信息失败');
      return;
    }

    // 获取食品列表
    const foodRes = await listFoodService({ businessId });
    if (foodRes.code === 0) {
      foodArr.value = foodRes.data.map(food => ({
        ...food,
        foodImg: handleAvatarUrl(food.foodImg),
        quantity: 0
      }));
    } else {
      ElMessage.error('获取食品列表失败');
      return;
    }

    // 如果用户已登录,获取购物车信息
    if (userStore.userInfo) {
      await listCart();
    }
  } catch (error) {
    console.error('初始化数据失败:', error);
    ElMessage.error('加载数据失败');
  }
};

// 获取购物车列表
const listCart = async () => {
  try {
    const response = await listCartByUserIdAndBusinessIdService({
      businessId,
      userId: userStore.userInfo.id
    });

    if (response.code === 0 && Array.isArray(response.data)) {
      // 更新食品数量和购物车ID
      foodArr.value.forEach(foodItem => {
        foodItem.quantity = 0;
        const cartItem = response.data.find(cart => cart.foodId === foodItem.foodId);
        if (cartItem) {
          foodItem.quantity = cartItem.quantity;
          foodItem.cartId = cartItem.cartId; // 保存购物车ID
        }
      });
    }
  } catch (error) {
    console.error('获取购物车失败:', error);
    ElMessage.error('获取购物车信息失败');
  }
};

// 添加商品
const add = async (index) => {
  if (!userStore.userInfo) {
    router.push({ path: "/login" });
    return;
  }

  try {
    const food = foodArr.value[index];
    if (food.quantity === 0) {
      // 新增购物车
      const res = await addCartService({
        businessId,
        userId: userStore.userInfo.id,
        foodId: food.foodId,
        quantity: 1
      });

      if (res.code === 0) {
        food.quantity = 1;
        // 新增成功后重新获取购物车列表，以获取正确的cartId
        await listCart();
      } else {
        ElMessage.error('添加到购物车失败');
      }
    } else {
      // 更新购物车
      await updateCart(index, 1);
    }
  } catch (error) {
    console.error('添加商品失败:', error);
    ElMessage.error('添加商品失败');
  }
};

// 减少商品
const minus = async (index) => {
  if (!userStore.userInfo) {
    router.push({ path: "/login" });
    return;
  }

  try {
    const food = foodArr.value[index];
    if (food.quantity > 1) {
      await updateCart(index, -1);
    } else {
      await removeCart(index);
    }
  } catch (error) {
    console.error('减少商品失败:', error);
    ElMessage.error('减少商品失败');
  }
};

// 更新购物车
const updateCart = async (index, num) => {
  try {
    const food = foodArr.value[index];
    const res = await updateCartService({
      cartId: food.cartId,
      businessId,
      userId: userStore.userInfo.id,
      foodId: food.foodId,
      quantity: food.quantity + num
    });

    if (res.code === 0) {
      food.quantity += num;
      // 更新成功后重新获取购物车列表，确保数据同步
      await listCart();
    } else {
      ElMessage.error('更新购物车失败');
    }
  } catch (error) {
    console.error('更新购物车失败:', error);
    throw error;
  }
};

// 删除购物车商品
const removeCart = async (index) => {
  try {
    const food = foodArr.value[index];
    const res = await deleteCartService(food.cartId);

    if (res.code === 0) {
      food.quantity = 0;
      food.cartId = null; // 清除cartId
    } else {
      ElMessage.error('从购物车中删除失败');
    }
  } catch (error) {
    console.error('删除购物车商品失败:', error);
    throw error;
  }
};

// 去结算
const toOrder = async () => {
  if (!userStore.userInfo) {
    router.push({ path: "/login" });
    return;
  }

  try {
    // 构建订单数据
    const orderData = {
      businessId: business.value.businessId,
      userId: userStore.userInfo.id,
      orderTotal: Number(totalSettle.value),
      deliveryPrice: business.value.deliveryPrice,
      orderItems: cartFoods.value.map(food => ({
        foodId: food.foodId,
        quantity: food.quantity,
        foodPrice: food.foodPrice
      }))
    };

    // 创建订单
    const res = await createOrder(orderData);
    
    if (res.code === 0 && res.data) {
      // 创建订单成功，跳转到支付页面
      router.push({
        path: '/payment',
        query: { 
          orderId: res.data
        }
      });
    } else {
      ElMessage.error('创建订单失败');
    }
  } catch (error) {
    console.error('创建订单失败:', error);
    ElMessage.error('创建订单失败，请重试');
  }
};

// 返回按钮处理
const goBack = () => {
  const fromPage = route.query.from;
  
  if (fromPage === 'index') {
    // 如果是从首页来的，返回首页
    router.push('/index');
  } else if (fromPage === 'businessList') {
    // 如果是从商家列表来的，返回商家列表，并保留原有参数
    router.push({
      path: '/businessList',
      query: { 
        foodTypeId: route.query.foodTypeId 
      }
    });
  } else {
    // 默认返回上一页
    router.back();
  }
};

// 页面加载时初始化数据
onMounted(() => {
  init();
  if (currentTab.value === 'ratings') {
    fetchReviews();
  }
});

// 导航栏数据
const navItems = [
  { key: 'menu', text: '点餐' },
  { key: 'ratings', text: '评价' },
  { key: 'info', text: '商家' }
];

// 当前选中的标签
const currentTab = ref('menu');

// 切换标签方法
const switchTab = (tab) => {
  currentTab.value = tab;
  // 切换到非菜单标签时，关闭购物车弹出层
  if (tab !== 'menu') {
    isCartPopupVisible.value = false;
  }
  if (tab === 'ratings') {
    fetchReviews();
  }
};

const reviews = ref([]);

// 获取评价列表
const fetchReviews = async () => {
  try {
    const res = await getBusinessReviews(businessId);
    if (res.code === 0) {
      reviews.value = res.data.map(review => ({
        ...review,
        userAvatar: handleAvatarUrl(review.userAvatar)
      })) || [];
    } else {
      ElMessage.error('获取评价失败');
    }
  } catch (error) {
    console.error('获取评价列表失败:', error);
    ElMessage.error('获取评价列表失败');
  }
};

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  });
};
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/****************** header部分 ******************/
header {
  width: 100%;
  height: 12vw;
  background-color: #ff7043;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
}

.header-content {
  width: 100%;
  height: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 4vw;
  position: relative;
}

.fa-arrow-left {
  position: absolute;
  left: 4vw;
  font-size: 4vw;
  color: #fff;
  width: 8vw;
  cursor: pointer;
}

.header-title {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 4.5vw;
  font-weight: bold;
}

.placeholder {
  width: 8vw;
}

/****************** 内容区域样式 ******************/
.content {
  flex: 1;
  padding-top: 12vw;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  overflow-y: auto;
  padding-bottom: 14vw;
}

/****************** 商家logo部分 ******************/
.business-logo {
  width: 100%;
  height: 30vw;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #f5f5f5; */
  padding: 2vw;
}

.business-logo img {
  width: 25vw;
  height: 25vw;
  object-fit: cover;
  border-radius: 2vw;
}

/****************** 商家信息部分 ******************/
.business-info {
  padding: 4vw;
  background: #fff;
}

.business-info-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 4vw;
}

.business-name {
  font-size: 5vw;
  color: #333;
  font-weight: 600;
  margin-bottom: 2vw;
  text-align: center;
}

.rating-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3vw;
}

.stars {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

.stars .fa-star {
  font-size: 3.5vw;
  color: #ddd;
}

.stars .fa-star.active {
  color: #ffd700;
}

.rating {
  font-size: 3.5vw;
  color: #ff7043;
  margin-left: 1vw;
  font-weight: 500;
}

.monthly-sales {
  font-size: 3.2vw;
  color: #666;
}

.business-info-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3vw;
  margin-bottom: 3vw;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 2vw;
  font-size: 3.2vw;
  color: #666;
}

.info-item i {
  color: #ff7043;
  font-size: 3.8vw;
}

.business-notice {
  display: flex;
  align-items: center;
  gap: 2vw;
  padding: 2vw 3vw;
  background: #fff5f0;
  border-radius: 1vw;
  margin-top: 2vw;
}

.business-notice i {
  color: #ff7043;
  font-size: 3.5vw;
}

.business-notice span {
  font-size: 3.2vw;
  color: #666;
  flex: 1;
  line-height: 1.4;
}

/****************** 食品列表部分 ******************/
.wrapper .food {
  width: 100%;
  /*使用下外边距避开footer部分*/
  margin-bottom: 14vw;
}
.wrapper .food li {
  width: 100%;
  box-sizing: border-box;
  padding: 3vw;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
  background: #fff;
  transition: all 0.3s ease;
}
.wrapper .food li:active {
  background: #f9f9f9;
}
.wrapper .food li .food-left {
  display: flex;
  align-items: center;
  flex: 1;
  margin-right: 3vw;
}
.wrapper .food li .food-left img {
  width: 20vw;
  height: 20vw;
  border-radius: 2vw;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.wrapper .food li .food-left .food-left-info {
  margin-left: 3vw;
  flex: 1;
  min-width: 0; /* 防止文本溢出 */
}
.wrapper .food li .food-left .food-left-info h3 {
  font-size: 3.8vw;
  color: #333;
  margin-bottom: 1vw;
  font-weight: 500;
}
.wrapper .food li .food-left .food-left-info p {
  font-size: 3vw;
  color: #999;
  margin-top: 1vw;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.wrapper .food li .food-left .food-left-info p.food-price {
  font-size: 4vw;
  color: #ff7043;
  font-weight: bold;
  margin-top: 2vw;
  display: flex;
  align-items: center;
}

.wrapper .food li .food-left .food-left-info p.food-price::before {
  content: '¥';
  font-size: 3vw;
  margin-right: 0.5vw;
}

.wrapper .food li .food-right {
  width: 18vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .food li .food-right .fa-minus-circle {
  font-size: 5.5vw;
  color: #bbb;
  cursor: pointer;
  transition: all 0.3s ease;
}
.wrapper .food li .food-right .fa-plus-circle {
  font-size: 5.5vw;
  color: #ff7043;
  cursor: pointer;
  transition: all 0.3s ease;
}
.wrapper .food li .food-right .fa-minus-circle:active,
.wrapper .food li .food-right .fa-plus-circle:active {
  transform: scale(0.9);
}
.wrapper .food li .food-right p {
  font-size: 3.8vw;
  color: #333;
  min-width: 4vw;
  text-align: center;
}

/****************** 购物车部分 ******************/
.wrapper .cart {
  width: 100%;
  max-width: 600px;
  height: 14vw;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  display: flex;
  z-index: 2001;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
.wrapper .cart .cart-left {
  flex: 2;
  background-color: #505051;
  display: flex;
}
.wrapper .cart .cart-left .cart-left-icon {
  width: 16vw;
  height: 16vw;
  box-sizing: border-box;
  border: solid 1.6vw #444;
  border-radius: 8vw;
  background-color: #3190e8;
  font-size: 7vw;
  color: #fff;

  display: flex;
  justify-content: center;
  align-items: center;

  margin-top: -4vw;
  margin-left: 3vw;

  position: relative;
}
.wrapper .cart .cart-left .cart-left-icon-quantity {
  width: 5vw;
  height: 5vw;
  border-radius: 2.5vw;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;

  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  right: -1.5vw;
  top: -1.5vw;
}
.wrapper .cart .cart-left .cart-left-info p:first-child {
  font-size: 4.5vw;
  color: #fff;
  margin-top: 1vw;
}
.wrapper .cart .cart-left .cart-left-info p:last-child {
  font-size: 2.8vw;
  color: #aaa;
}

.wrapper .cart .cart-right {
  flex: 1;
}
/*达到起送费时的样式*/
.wrapper .cart .cart-right .cart-right-item {
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 4.5vw;
  font-weight: 700;
  user-select: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 达到起送费时的样式 */
.wrapper .cart .cart-right .cart-right-item[style*="cursor: pointer"] {
  background-color: #ff7043 !important; /* 确保颜色与header一致 */
}

/* 不够起送费时的样式 */
.wrapper .cart .cart-right .cart-right-item[style*="cursor: default"] {
  background-color: #535356;
}

/* 购物车弹出层样式 */
.cart-popup {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2000;
}

.cart-popup .mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 14vw;
  background-color: rgba(0, 0, 0, 0.5);
}

.cart-popup .popup-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14vw;
  background-color: #fff;
  border-radius: 2vw 2vw 0 0;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
}

.popup-header {
  padding: 3vw 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.popup-header span {
  font-size: 3.8vw;
  font-weight: bold;
}

.popup-header .clear {
  color: #999;
  font-size: 3.5vw;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1vw;
}

.popup-header .clear:active {
  opacity: 0.8;
}

.food-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 4vw;
  margin-bottom: 2vw;
}

.food-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3vw 0;
  border-bottom: 1px solid #f5f5f5;
}

.food-info {
  display: flex;
  align-items: center;
  gap: 3vw;
}

.food-info img {
  width: 15vw;
  height: 15vw;
  border-radius: 2vw;
  object-fit: cover;
}

.food-detail {
  display: flex;
  flex-direction: column;
  gap: 1vw;
}

.food-detail h4 {
  font-size: 3.8vw;
  color: #333;
}

.food-detail .price {
  font-size: 3.8vw;
  color: #ff7043;
  font-weight: bold;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 2vw;
}

.quantity-control i {
  font-size: 5.5vw;
  cursor: pointer;
}

.quantity-control .fa-minus-circle {
  color: #999;
}

.quantity-control .fa-plus-circle {
  color: #0097ef;
}

.quantity-control span {
  font-size: 3.8vw;
  color: #333;
  min-width: 3vw;
  text-align: center;
}

/* 新增导航栏部分 */
.nav-bar {
  width: 100%;
  height: 11vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.nav-item {
  font-size: 3.8vw;
  color: #666;
  padding: 2vw 4vw;
  cursor: pointer;
  position: relative;
}

.nav-item.active {
  color: #ff7043;
  font-weight: bold;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -2vw;
  left: 50%;
  transform: translateX(-50%);
  width: 6vw;
  height: 0.5vw;
  background-color: #ff7043;
  border-radius: 0.25vw;
}

/* 内容区域样式 */
.content-area {
  width: 100%;
  background: #fff;
}

.tab-content {
  min-height: 50vh;
}

/* 评价区域样式 */
.ratings-wrapper {
  padding: 4vw;
}

.rating-overview {
  display: flex;
  align-items: center;
  padding: 4vw;
  background: #f8f8f8;
  border-radius: 2vw;
}

.rating-score {
  text-align: center;
  margin-right: 6vw;
}

.rating-score h2 {
  font-size: 8vw;
  color: #ff7043;
  margin-bottom: 1vw;
}

.rating-score p {
  font-size: 3.2vw;
  color: #666;
}

.rating-count {
  font-size: 3.2vw;
  color: #666;
}

/* 商家详情样式 */
.business-detail {
  padding: 4vw;
}

.detail-item {
  background: #f8f8f8;
  border-radius: 2vw;
  padding: 4vw;
}

.detail-item h3 {
  font-size: 4vw;
  color: #333;
  margin-bottom: 3vw;
}

.detail-item p {
  font-size: 3.2vw;
  color: #666;
  line-height: 1.8;
  margin-bottom: 2vw;
}

.review-list {
  margin-top: 4vw;
}

.no-review {
  text-align: center;
  color: #999;
  padding: 8vw 0;
  font-size: 3.8vw;
}

.review-item {
  padding: 4vw;
  border-bottom: 1px solid #eee;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 2vw;
}

.user-avatar {
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  margin-right: 3vw;
}

.review-info {
  flex: 1;
}

.user-name {
  font-size: 3.8vw;
  color: #333;
  margin-bottom: 1vw;
}

.review-time {
  font-size: 3.2vw;
  color: #999;
}

.review-rating {
  display: flex;
  gap: 1vw;
}

.review-rating .fa-star {
  font-size: 3.5vw;
  color: #ddd;
}

.review-rating .fa-star.active {
  color: #ffd700;
}

.review-content {
  font-size: 3.5vw;
  color: #666;
  line-height: 1.6;
  margin-top: 2vw;
}
</style>